<template>
  <div class="clueDetail">
    <router-header title="线索详情"></router-header>
    <div class="form-single-fragment" style="position: relative">
      <el-form :model="detailData" size="mini" label-position="right">
        <el-row :gutter="20">
          <el-col :span="24" class="clue-title">{{
            detailData.clueName
          }}</el-col>
          <el-col :span="6">
            <el-form-item label="创建日期：">{{
              detailData.createTime
            }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="线索录入部门：">{{
              detailData.deptName
            }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="线索录入人：">{{
              detailData.createUserName
            }}</el-form-item>
          </el-col>
          <el-col :span="24" class="line"></el-col>
          <el-col :span="24" class="clue-title">线索基本信息</el-col>
          <el-col :span="12">
            <el-form-item label="企业名称：">{{
              detailData.customerName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业联系人：">
              <span>{{ detailData.contacts }}</span>
              <span style="margin-left: 10px">{{ detailData.telephone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型：">{{
              detailData.businessTypeName
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型：">{{
              detailData.projectType
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地区：">{{
              detailData.parentName.join(' ')
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址：">{{
              detailData.detailedAddress
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线索来源：">{{
              detailData.clueSource
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业属性：">{{
              detailData.productIntention
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="线索概况：">{{
              detailData.clueContent
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="line"></div>
    <div class="clue-title">线索动态</div>
    <div class="dynamic" v-loading="loading">
      <div class="dynamic-item" v-for="(item,index) in list" :key="index">
        <div style="flex-shrink: 0">
          <img class="avatar" src="@/assets/img/default-header.png" alt="" />
          <div class="name">{{item.userName}}，{{item.deptNmae}}</div>
        </div>
        <div style="margin-left: 20px">
          <div class="dynamic-content">
            {{item.dynamicsContent}}
          </div>
          <div class="dynamic-time">发布于{{item.createTime}}
            <el-button type="text" v-if="item.deletedType === 1" style="margin-left: 15px" @click="handleClickDelete(item.id)">删除</el-button>
          </div>
        </div>
      </div>
      <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.current"
            :page-size="queryParams.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, prev, pager, next, sizes"
            :total="total"
            v-if="total > 0"
          ></el-pagination>
      <div class="dynamic-release" ref="dynamic-release">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="dynamicValue"
          maxlength="150"
          :rows="5"
          show-word-limit
        >
        </el-input>
        <div class="release-btn">
          <el-button type="primary" :disabled="!dynamicValue.trim()" @click="handleClickRelease">发布动态</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Cluemanagement } from '@/api/commercial.js';
export default {
  name: 'Clueadd',
  data () {
    return {
      loading: false,
      isShowloading: false,
      detailData: {
        parentName: []
      },
      clueId: this.$route.query.clueId,
      dynamicValue: '',
      queryParams: {
        current: 1,
        size: 10,
        clueId: this.$route.query.clueId
      },
      total: 0,
      list: []
    };
  },
  created () {
    this.getList()
  },
  mounted () {
    this.loadCluedetail();
  },
  methods: {
    /**
     * 线索详情
     */
    loadCluedetail () {
      let params = this.clueId;
      return new Promise((resolve, reject) => {
        Cluemanagement.detail(this, params)
          .then((res) => {
            this.detailData = res.data;
            this.$nextTick(() => {
              console.log(this.$route.query.type, 4444)
              if (this.$route.query.type === '1') {
                console.log(this.$route.query.type, 44445555)
                this.$refs['dynamic-release'].scrollIntoView({ behavior: 'smooth' });
              }
            })
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    handleClickRelease () {
      Cluemanagement.releaseNews(this, {
        clueId: this.detailData.id,
        dynamicsContent: this.dynamicValue.trim()
      }).then(res => {
        this.dynamicValue = ''
        this.$message({
          message: '已发布',
          type: 'success'
        })
        this.getList()
      })
    },
    getList () {
      this.loading = true
      Cluemanagement.dynamicList(this, this.queryParams).then(res => {
        this.list = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      this.queryParams.current = val
      this.getList();
    },
    handleSizeChange (val) {
      this.queryParams.size = val
      this.getList();
    },
    handleClickDelete (id) {
      this.$confirm('是否删除此条动态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Cluemanagement.dynamicDelete(this, {id}).then(res => {
          this.getList();
        })
      }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.clueDetail {
  position: relative;
  .clue-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .line {
    width: 100%;
    height: 2px;
    background: rgba(242, 242, 242, 1);
    margin-bottom: 15px;
  }
  .dynamic {
    padding: 20px;
    border-radius: 8px;
    background: rgba(242, 242, 242, 0.3);
    .dynamic-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 40%;
        margin: 0 auto;
        display: block;
        margin-bottom: 6px;
      }
      .dynamic-content {
        min-height: 40px;
        margin-bottom: 6px;
      }
      .dynamic-time {
        color: #d7d7d7;
      }
    }
    .dynamic-release {
      margin-top: 50px;
    }
    .release-btn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
